<template>
  <div class="app-container">
    <el-form ref="product" :model="product" label-position="right" label-width="120px" status-icon>
      <el-form-item label="产品名称" prop="pname">
        <!--fetch方法会在输入时不断执行，返回相似列表-->
        <!--select则是在选择列表中的值触发-->
        <!--change则是鼠标移开时触发，select除外
        value-key是显示的值 -->
        <el-autocomplete v-model="product.pname" :fetch-suggestions="querySearchAsync"
                         :highlight-first-item="true"
                         clearable
                         placeholder="请输入产品名称"
                         value-key="pname"
                         @change="change"
                         @select="selectProduct"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="库存" prop="store">
        <el-input-number v-model="product.number" :disabled="true"></el-input-number>
      </el-form-item>
      <el-form-item label="出售数量" prop="number">
        <el-input-number v-model="sell.sellNumber" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input-number v-model="sell.sellPrice" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="sell.comment" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Sell</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getProductsByName} from "@/api/product";

export default {
  name: 'index',
  data() {
    return {
      sell: {id: 0, pid: 0, sellNumber: 0, sellPrice: 0, sellDate: null, comment: null},
      products: [],
      product: {
        pid: null,
        pname: null,
        category: null,
        number: 0,
      }
    }
  },
  methods: {
    onSubmit() {
      const _this = this;
      _this.$refs.product.validate((valid) => {
        if (valid) {
          if (!_this.check()) {
            this.$message.error("必须选择仓库已有产品");
          } else {
            if (_this.sell.sellNumber > _this.product.number) {
              this.$message.error("库存可不够");
              return
            }
            _this.sell.pid = _this.product.pid;
            axios.post("/sell/sellProduct", _this.sell).then(rs => {
              if (rs.data.code === 200) {
                _this.$message.success("出售成功");
                _this.timer = setTimeout(() => {
                  window.location.reload();
                }, 1000);
              } else {
                _this.$message.error(rs.data.message);
              }
            })
          }
        }
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    querySearchAsync(queryString, cb) {
      const _this = this;
      getProductsByName(queryString).then(rs => {
        _this.products = rs.message;
        cb(_this.products)
      })
    },
    selectProduct(advice) {
      this.product = JSON.parse(JSON.stringify(advice))
    }, change() {
      if (!this.check()) {
        this.product.number = 0;
      }
    }, check() {
      const _this = this;
      let flag = false;
      if (_this.products.length > 0) {
        _this.products.forEach(item => {
          if (item.pname === _this.product.pname) {
            _this.product = JSON.parse(JSON.stringify(item))
            flag = true;
          }
        })
      }
      return flag;
    }
  }
}
</script>

<style scoped>
.app-container {
  font-family: "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: 6px;
}
</style>

